<template>
    <div style="text-align:left">
        <h3>具有数据校验功能的表单组件</h3>
        <i-form ref="form" :model="formValidate" :rules="ruleValidate">
            <i-form-item label="用户名" prop="name">
                <i-input v-model="formValidate.name"></i-input>
             </i-form-item>
             <i-form-item label="邮箱" prop="mail">
                 <i-input v-model="formValidate.mail"></i-input>
             </i-form-item>
             <i-form-item label="开关" prop="key">
                 <i-checkbox v-model="formValidate.key"></i-checkbox>
             </i-form-item>
             <i-form-item>
                <i-checkbox-group v-model="formValidate.jobTypes" @on-change="fuck">
                    <i-checkbox label='1'></i-checkbox>
                    <i-checkbox label='2'></i-checkbox>
                    <i-checkbox label='3'></i-checkbox>
                </i-checkbox-group>
             </i-form-item>
             <i-form-item>
                 <i-radio v-model="formValidate.single">
                 </i-radio>
             </i-form-item>
             <i-form-item>
                 <i-radio-group v-model="formValidate.phone">
                     <i-radio label="mi"></i-radio>
                     <i-radio label="apple"></i-radio>
                     <i-radio label="meizu"></i-radio>
                 </i-radio-group>
             </i-form-item>
        </i-form>
    </div>
</template>

<script>
import iForm from 'base/form/form.vue';
import iFormItem from 'base/form/form-item.vue';
import iInput from 'base/input/input.vue';
import iCheckbox from 'base/checkbox/checkbox';
import iCheckboxGroup from 'base/checkbox/checkbox-group'
import iRadio from 'base/radio/radio'
import iRadioGroup from 'base/radio/radio-group'
export default {
    components:{iForm,iFormItem,iInput,iCheckbox,iCheckboxGroup,iRadio,iRadioGroup},
    data() {
        return {
            formValidate:{
                name:'',
                mail:'',
                key:false,
                jobTypes:['1','2','3'],
                single:false,
                phone:'mi'
            },
            ruleValidate:{
                name:[
                    // {required:true,message:'用户名不能为空',trigger:'blur'},
                    // {required:true,message:'用户名不能为空',trigger:'change'}
                    {required:true,message:'用户名不能为空'}
                ],
                mail:[
                    // {required:true,message:'邮箱不能为空',trigger:'blur'},
                    // {required:true,message:'邮箱不能为空',trigger:'change'},
                    // {type:'email',message:'邮箱格式不正确',trigger:'blur'},
                    // {type:'email',message:'邮箱格式不正确',trigger:'change'},
                    {required:true,message:'邮箱不能为空'},
                    {type:'email',message:'邮箱格式不正确'}
                ],
                key:[
                    {required:true}
                ]
            }
        }
    },
    methods:{
        handleSubmit() {
            const validate = this.$refs.form.validate();

            validate.then((valid)=>{
                if(valid) {
                    window.alert('提交成功')
                }else {
                    window.alert('验证失败')
                }
            })
        },

        handleReset() {
            this.$refs.form.resetFields();
        },
        fuck(data){
            console.log(data)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
